<template>
  <div class="main">
    <h2 class="main-index">实验五</h2>
    <p class="main-title">Nyquist图</p>
    <!-- <p class="sub-title">设一阶系统的传递函数为</p>
    <img class="formula" src="../assets/img/2.png" /> -->
    <div class="formula-box">
      <p class="tip">G(s)</p>
      <p class="tip">=</p>
      <div class="insert">
        <div class="top">
          <input v-model="bForm.b0" />+ <input v-model="bForm.b1" />s+
          <input v-model="bForm.b2" />s²+ <input v-model="bForm.b3" />s³+
          <input v-model="bForm.b4" />s⁴+ <input v-model="bForm.b5" />s⁵
        </div>
        <div class="bottom">
          <input v-model="aForm.a0" />+ <input v-model="aForm.a1" />s+
          <input v-model="aForm.a2" />s²+ <input v-model="aForm.a3" />s³+
          <input v-model="aForm.a4" />s⁴+ <input v-model="aForm.a5" />s⁵
        </div>
      </div>
    </div>
    <div class="line-box">
      <p v-for="(item, index) in TArr" :key="index">
        <span>{{ item }}</span>
        <span :style="{ background: colorArr[index] }"></span>
      </p>
    </div>
    <div id="mapbox" ref="mapbox"></div>
    <!-- <van-field style="margin-bottom: 0.2rem" v-model="TNumber" type="number" center clearable label="ω" placeholder="请输入T值">
      <template #button>
        <van-button size="small" @click="submit" type="primary">提交</van-button>
      </template>
    </van-field> -->
    <div class="btn-box">
      <a
        href="javascript:;"
        @click="showHelp"
        class="help miniBtn weui-btn weui-btn_mini weui-btn_primary"
        >帮助</a
      >
      <a
        href="javascript:;"
        @click="run"
        class="help miniBtn weui-btn weui-btn_mini weui-btn_primary"
        >提交</a
      >
      <a
        href="javascript:;"
        @click="clearData"
        class="help miniBtn weui-btn weui-btn_mini weui-btn_primary"
        >清除</a
      >
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import { Toast } from "vant";
import { colorArr } from "../utils/config";
export default {
  name: "onePage",
  data() {
    return {
      bForm: {
        b0: "",
        b1: "",
        b2: "",
        b3: "",
        b4: "",
        b5: "",
      },
      aForm: {
        a0: "",
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
      },
      TNumber: 0, // 输入值
      TArr: [], // 已提交的T值集合
      colorArr,
      myChart: null,
      option: null,
      yAxisType: "category",
      yAxisArr: [-1, -0.5, 0, 0.5, 1],
      xAxisArr: [-1, -0.5, 0, 0.5, 1],
      seriesArr: [], // 计算后的值集合
      aaForm: {
        aa0: 0,
        aa1: 0,
        aa2: 0,
        aa3: 0,
        aa4: 0,
        aa5: 0,
      },
      bbForm: {
        bb0: 0,
        bb1: 0,
        bb2: 0,
        bb3: 0,
        bb4: 0,
        bb5: 0,
      },
      lineData: [],
      lineDataY: [],
    };
  },
  methods: {
    initChart() {
      // const tArr = [0.1];
      // const xAxisArr = [0, 0.1, 0.2, 0.3, 0.4];
      // const yAxisArr = [0, 2.5, 5, 7.5, 10];
      // const seriesArr = [];
      // const yAxisType = "category";
      const normalFontSize = 12;
      const normalNameFontSize = 16;
      const needClear = false;
      this.myChart = this.$echarts.init(document.getElementById("mapbox"));
      this.option = {
        title: {
          text: "",
        },
        tooltip: {},
        // grid: {
        //   left: '60px'
        // },
        xAxis: {
          type: this.yAxisType,
          name: "Re",
          nameTextStyle: {
            fontSize: normalNameFontSize,
          },
          boundaryGap: false,
          data: this.xAxisArr,
          axisLabel: {
            // interval: 1,
            show: true,
            hideOverlap: true,
            fontSize: normalFontSize,
          },
          axisLine: {
            symbol: ["none", "arrow"],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        yAxis: {
          name: "Im",
          type:  this.yAxisType,
          show: true,
          nameTextStyle: {
            fontSize: normalNameFontSize,
          },
          boundaryGap: false,
          data: this.yAxisArr,
          axisLabel: {
            fontSize: normalFontSize,
            marhin: 2,
          },
          axisLine: {
            symbol: ["none", "arrow"],
            show: true,
            onZero: true,
            lineStyle: {
              color: "blue",
            },
          },
        },
        series: this.seriesArr,
      };
      this.myChart.setOption(this.option);
    },
    showHelp() {
      this.$weui.alert(
        "<p>1.本实验绘制系统的Nyquist图;</p><p>2.用户输入系统传递分子、分母多项式的系数;</p><p>3.用户按“仿真”按钮，系统进行仿真;</p><p>4.按“清除”按钮清除参数和仿真结果，可以重新输入参数和仿真。</p>",
        {
          title: "帮助",
          className: "help",
          buttons: [
            {
              label: "确定",
              type: "primary",
              onClick: function () {
                console.log("ok");
              },
            },
          ],
        }
      );
    },
    submit() {
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      if (this.TArr.length >= 5) {
        return;
      }
      if (!this.TNumber || this.TNumber < 0 || this.TNumber > 10000) {
        Toast.fail("T值不合法");
        return;
      }
      this.TArr.push(this.TNumber);
    },
    clearData() {
      this.TNumber = 0;
      this.TArr = [];
      this.myChart = null;
      this.option = null;
      this.yAxisType = "category";
      this.yAxisArr = [-1, -0.5, 0, 0.5, 1];
      this.xAxisArr = [-1, -0.5, 0, 0.5, 1];
      this.seriesArr = [];
      this.bForm = {
        b0: "",
        b1: "",
        b2: "",
        b3: "",
        b4: "",
        b5: "",
      };
      this.aForm = {
        a0: "",
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
      };
      this.$echarts.init(this.$refs.mapbox).dispose();
      this.$nextTick(() => {
        this.initChart();
      });
    },
    getData() {
      const that = this;
      let arr = [];
      let num = 0;
      let w = 0;
      that.xAxisArr = [];
      if (this.aForm.a0 == 0) {
        w = 0.01;
      } else {
        w = 0;
      }
      let x = [];
      let y = []
      while (w <= 5000) {
        let tht1 =
          that.bForm.b0 - that.bForm.b2 * w * w + that.bForm.b4 * w * w * w * w;
        let tht2 =
          that.bForm.b1 * w -
          that.bForm.b3 * w * w * w +
          that.bForm.b5 * w * w * w * w * w;
        let tht3 =
          that.aForm.a0 - that.aForm.a2 * w * w + that.aForm.a4 * w * w * w * w;
        let tht4 =
          that.aForm.a1 * w -
          that.aForm.a3 * w * w * w +
          that.aForm.a5 * w * w * w * w * w;
        x[num] = (tht1 * tht3 + tht2 * tht4) / (tht3 * tht3 + tht4 * tht4);
        y[num]= (tht2*tht3-tht1*tht4)/(tht3*tht3+tht4*tht4);
        that.lineData[num] = [x[num],y[num]]
        if (w < 5) {
          w = w + 0.01;
        } else if (w < 100) {
          w = w + 0.5;
        } else {
          w = w + 10;
        }
        num = num + 1;
      }
      // that.xAxisArr = x;
      console.log(that.lineData);
      console.log(w)
      // console.log(that.lineDataY);

    },
    run() {
      const that = this;
      if (this.seriesArr.length) {
        Toast.fail("请先点击清除按钮");
        return;
      }
      const valueArr = Object.values(this.bForm).concat(
        Object.values(this.aForm)
      );
      let noValue = valueArr.some((item) => {
        return Boolean(Number(item));
      });
      if (!noValue) {
        Toast.fail("请输入系数");
        return;
      }

      if (
        Math.abs(this.aForm.a0) +
          Math.abs(this.aForm.a1) +
          Math.abs(this.aForm.a2) +
          Math.abs(this.aForm.a3) +
          Math.abs(this.aForm.a4) +
          Math.abs(this.aForm.a5) !=
        0
      ) {
        this.getData();
      }
      // y[num]= (tht2*tht3-tht1*tht4)/(tht3*tht3+tht4*tht4);

      // for(let i=0.001;i<1000;i++) {
      //   if(!i) {
      //     lineData.push([0, 0])
      //   } else {
      //     const x1 = that.bForm.b0 - that.bForm.b2 * Math.pow(i, 2) + that.bForm.b4 * Math.pow(i, 4)
      //     const x2 = that.bForm.b1 * i - that.bForm.b3 * Math.pow(i, 3) + that.bForm.b5 * Math.pow(i, 5)
      //     const x3 = that.aForm.a0 - that.aForm.a2 * Math.pow(i, 2) + that.aForm.a4 * Math.pow(i, 4)
      //     const x4 = that.aForm.a1 * i - that.aForm.a3 * Math.pow(i, 3) + that.aForm.a5 * Math.pow(i, 5)
      //     const rw = (x1*x3 + x2*x4) / (Math.pow(x3, 2) + Math.pow(x4, 2))
      //     const iw = (x2*x3 - x1*x4) / (Math.pow(x3, 2) + Math.pow(x4, 2))
      //     lineData.push([Number(rw).toFixed(10), Number(iw).toFixed(10)])
      //   }
      // }


      let wNum = this.aForm.a0 ? '0':'0.01'
      that.seriesArr = [
        {
          data: that.lineData.reverse(),
          name: "ω="+wNum,
          type: "line",
          smooth: true,
          symbol: "none",
          lineStyle: {
            color: that.colorArr[0],
          },
          endLabel: {
            show: true,
            formatter: () => {
              return "ω="+wNum;
            },
            color: "#ff0000",
            // distance: 20,
            offset: [0, -10]
          },
        },
      ];

      this.yAxisType = "value";
      console.log(this.seriesArr);
      console.log(this.option);
      this.$echarts.init(this.$refs.mapbox).dispose();
      this.myChart.dispose();
      this.$nextTick(() => {
        this.initChart();
      });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style scoped>
.formula-box {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.formula-box .tip {
  font-size: 0.45rem;
}
.formula-box .insert {
  font-size: 0.38rem;
  margin-left: 2px;
}
.formula-box .insert .top {
  padding-bottom: 4px;
  border-bottom: 1px solid #333;
  margin-bottom: 4px;
}
.formula-box input {
  width: 6.5vw;
  height: 4vw;
  font-size: 0.35rem;
  margin-right: 1px;
}
.line-box p {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-box p span:first-child {
  color: #333;
  width: 12vw;
  overflow: hidden;
  line-height: 0.4rem;
  font-size: 0.45rem;
  margin-right: 12px;
}
.line-box p span:last-child {
  width: 10vw;
  height: 4px;
  display: inline-block;
}
</style>